<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
	<script type='text/javascript' src="jquery-1.6.min.js"></script>
    <script type='text/javascript' src="ejemplo.3.js"></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawVisualization);
    </script>
	<style type="text/css">
	.google-visualization-orgchart-node {	
		background: #6a001a; /*bordeau for border*/
		border-radius:6px;
		border-left:0px;
		border-top:0px;
		border-color:#6a001a; /*bordeau*/
	}	

	#chart_div.loading{
		background:url(loader.gif) no-repeat center center;
	}
	
	#loader{
		background:url(loader.gif) no-repeat center center;
		width:100px;
		height:100px;
		position:fixed;
		top:50%;
		left:50%;
		margin:-50px 0 0 -50px;
		z-index:100;
		display:none;
	}

//------------------------------------------

	.subcategory1 .google-visualization-orgchart-node-medium {
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
		height: 30px;
		background-color:#6a001a; /*bordeau for border*/
	}
	
	.google-visualization-orgchart-lineleft {	
		border-left: 2px solid #888d90!important; /*gris*/
	}
	.google-visualization-orgchart-linebottom {	
		border-bottom: 2px solid #888d90!important; /*gris*/
	}
	.google-visualization-orgchart-lineright {	
		border-right: 2px solid #888d90!important; /*gris*/
	}
	
	.category {
		background-color:#991633; /*pink*/
		border-radius: 6px 6px 6px 6px;
		display:block;
		height:99px;
		margin-left:-5px;
		margin-top:-6px;
		position:relative;
		width:97px;
	}

	.category h3, .categorypink h3 {
		color:white;
		margin-top:1%;
		height:37px;
	}

	.person{
		position:relative;
		width:auto;		
	}

	.person  .name{
		position:absolute;
		margin-top:33px;
		font-size: 1.3em;
		width:99px;
		left:0;
		border-radius: 0 0 6px 6px;
		background-color:#e6e6e7;
	}
	.person .name span{
		font-size:.7em;
	}

	.initials{
		position:absolute;
		margin-top:11px;
		width:99px;
		left:0;
		background-color:#FFFFFF;
	}

	.fondo{
		background-color:#C23B3B;
	}
	
	.subCategory1{
		border-radius:6px;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
		border:1px solid #9b3a37;
		border-left:0px;
		border-top:0px;
		background-color:#9B3A37;		
		font-family:arial;
		width:98px;
	}

	.subCategory1 .category{
		background-color:#f05f5b; /*pink*/
		border-radius: 6px 6px 6px 6px;
		margin-top:-6px;
		width:97px;
	}
	.subCategory1 .category, .person, .initial{
		border-radius: 6px 6px 6px 6px;
		margin-left:-4px;
		
	}
	
	.categorypink{
		background-color:#f05f5b; /*pink*/
		border-radius: 6px 6px 6px 6px;
		display:block;
		height:99px;
		margin-left:-5px;
		margin-top:-6px;
		position:relative;
		width:97px;
	}
	
	</style>
  </head>

  <body>
    <div id='chart_div'></div>
	<div id="loader"></div>
  </body>
</html>